/*!
 * Image Zoomer (boom-style edition, 2011.04.13)
 */
/**
 * 각 사이트 별 독립
 * 
 * @see http://0xcc.net/jsescape/ 에서 unicode로 변경
 */
(function() {
	// this["$"+"i"+"z"+"d"]=
	// ["boom-style.com"]
	eval([
		"\u0074\u0068\u0069\u0073\u005B\u0022\u0024\u0022\u002B\u0022\u0069\u0022\u002B\u0022\u007A\u0022\u002B\u0022\u0064\u0022\u005D\u003D",
		// 아래에 도메인을 넣는다. (배열 문구 포함)
		"\u005B\u0022\u0062\u006F\u006F\u006D\u002D\u0073\u0074\u0079\u006C\u0065\u002E\u0063\u006F\u006D\u0022\u005D"
	].join(""));
	
	// this["$"+"i"+"z"+"s"]
	this[eval("\u0022\u0024\u0022\u002B\u0022\u0069\u0022\u002B\u0022\u007A\u0022\u002B\u0022\u0073\u0022")] = {
		config: {
			wSf: 340,
			wLf: 560,
			hSf: 500,
			hLf: 525,
			hBf: 24 // hBf = hLf - hSf - 1
		},
		
		/**
		 * 스타일을 추가하고 박스모델 레이아웃을 수정한 후, 엘리먼트를 보여준다.
		 * 1.1 버전 하위호환성을 위해 defineStyle이란 이름을 그대로 가져간다.
		 * 
		 * @param config
		 * @param images
		 */
		defineStyle: function(config, images) {
			this.appendStyleTag(config, images);
			
			var self = this;
			$(window).ready(function() {
				self.fixLayoutIfNotSupportBoxModel(config);
				self.showImageZoomer();
			});
		},
	
		appendStyleTag: function(config, images) {
			var style = [
				'<style type="text/css">',
					
					'#image-zoomer {display:none;position:relative;width:<%=wSf+wLf+21%>px;height:<%=hLf+10%>px;margin:0;padding:0;border:1px solid <%=bcF%>;font-size:12px;font-family:Tahoma;color:<%=cT%>;background:#fff;z-index:1000;text-align:left;line-height:14px;}',
					'#image-zoomer div.small {position:absolute;left:5px;top:5px;width:<%=wSf%>px;height:<%=hSf%>px;background:<%=bgcF%>;}',
					'#image-zoomer div.small img {position:absolute;z-index:1001;}',
					'#image-zoomer div.small p {display:none;position:absolute;right:20px;bottom:10px;}',
					'#image-zoomer div.small_loading p {!important;display:inline;}',
					'#image-zoomer div.small_loading img {!important;display:none;}',
					'#image-zoomer div.thumb {display:none;border:1px solid <%=bcTb%>;background:#fff;opacity:.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);cursor:pointer;z-index:1002;}',
					'#image-zoomer div.line {position:absolute;top:0;left:0;width:<%=wSf+10%>px;height:<%=hLf+11%>px;border-right:1px solid <%=bcF%>;}',
					'#image-zoomer div.large {position:absolute;top:5px;right:5px;width:<%=wLf%>px;height:<%=hLf%>px;background:<%=bgcF%>;background-repeat:no-repeat;}',
					'#image-zoomer div.large p {display:none;position:absolute;right:20px;bottom:10px;}',
					'#image-zoomer div.large_loading p {!important;display:inline;}',
					'#image-zoomer div.bottom {position:absolute;top:<%=hSf+10%>px;left:0;width:<%=wSf+10%>px;height:<%=hBf%>px;border-top:1px solid <%=bcF%>;background:<%=bgcBf%>;text-align:center;}',
					'#image-zoomer div.bottom a {display:inline-block;width:18px;height:13px;margin:6px 3px 0 3px;background-color:<%=bgcOthr%>;text-decoration:none;font-size:12px;line-height:14px;}',
					'#image-zoomer div.bottom a.current {background-color:<%=bgcCrnt%>;font-size:12px;line-height:14px;}',
					
				'</style>'
			].join("");
			
			$("head").append(tmpl(style, config));
		},
		
		fixLayoutIfNotSupportBoxModel: function(config) {
			if ($.support.boxModel === false) { // quirks
				$("#image-zoomer")
					.css("height", (config.hLf + 12) + "px")
					.find("div.line")
						.css("width", (config.wSf + 11) + "px")
						.end()
					.find("div.large")
						.css("right", "3px")
						.end()
					.find("div.bottom")
						.css("height", (config.hBf + 1) + "px")
						.end();
			}
		},
		
		showImageZoomer: function() {
			$("#image-zoomer").show();
		},
		
		createDom: function(config, images) {
			document.write(this.getMarkup(config, images));
		},
		
		appendDom: function(config, images, target) {
			$(target).replaceWith(this.getMarkup(config, images));
		},
		
		getMarkup: function(config, images) {
			var markup = [
				'<div style="<%=style%>">',
					'<div id="image-zoomer">',
						'<div class="line"></div>',
						'<div class="small small_loading">',
							'<p><%=ldT%></p>',
							'<img width="<%=wSf%>" height="<%=hSf%>">',
							'<div class="thumb" title="\uC774\uB3D9\uD558\uB824\uB294\u0020\uACF3\uC73C\uB85C\u0020\uB4DC\uB798\uADF8\u0020\uD574\uBCF4\uC138\uC694"></div>',
						'</div>',
						'<div class="large large_loading">',
							'<p><%=ldT%></p>',
						'</div>',
						'<div class="bottom">',
							'<% for (var i = 0; i < images.length; i++) { %>',
							'<a href="#" small-url="<%=images[i].small%>" large-url="<%=images[i].large%>">&nbsp;</a>',
							'<% } %>',
						'</div>',
					'</div>',
				'</div>'
			].join("");
			
			config.images = images;
			return tmpl(markup, config);
		}
	};
	
})();